<template>
  <div v-show="downhome"
       class="home">
    <div class="content">
      <div class="toptitle">
        <span class="Propaganda">喊话器</span>
        <span @click="downhome=false"
              class="shutdown">关闭</span>
      </div>
      <div class="bottomcentent">
        <div class="leftcentent">
          <div class="apparatus"><img src="@/assets/img/喊话器.png"
                 alt=""></div>
          <div class="angleadjustment"><img src="@/assets/img/角度调节icon.png"
                 alt=""><span>角度调节</span></div>
          <div class="rotatingbutton"><img src="@/assets/img/角度调节.png"
                 alt=""></div>
          <div class="volume"><img src="@/assets/img/音量.png"
                 alt=""><span>音量调节</span></div>
          <div class="volumeimg">
            <img class="jianvolume"
                 src="@/assets/img/减小音量.png"
                 alt=""
                 @click="setVolume(-1)">
            <span class="progress">
              <span class="line"
                    :style="`width:${volumeSize}px`"></span>
              <span class="ball"></span>
            </span>
            <img class="addvolume"
                 src="@/assets/img/加大音量.png"
                 alt=""
                 @click="setVolume(1)">
          </div>
        </div>
        <div class="rightcentent">
          <Righttable @playText="str2voice"
                      @playVoice="playVoice"
                      @playFile="playFile"
                      @actualAudio="actualTimeAudio" />
        </div>
      </div>
    </div>

    <Mqtt v-if="isMqtt"
          ref="mqttRef"></Mqtt>
  </div>
</template>

<script>
import Righttable from '@/components/righttable'
import Mqtt from '@/components/mqtt.vue'
import CmdSetSystemVolume from "../utils/cmd_set_system_volume";
import CmdTtsText from "../utils/cmd_tts_text";

export default {
  name: 'Home',
  data () {
    return {
      activeName: 'first',
      downhome: true,
      isMqtt: false,

      volumeSize: 13,//音量大小

      volumeText: '',//播放文字

      cmdstr: '播放文字',//命令名称

    };
  },
  components: {
    Righttable,
    Mqtt,
  },
  methods: {
    // 开启mq
    openMqtt () {
      this.isMqtt = true
    },
    // 发送mq消息
    sendMsg (msg) {
      this.$refs.mqttRef.mqtt_publish(msg, this.cmdstr);
    },
    // 设置音量
    setVolume (num) {
      this.volumeSize = this.volumeSize + num;
      let size = this.volumeSize * 1
      let cmd = new CmdSetSystemVolume(size);
      let message = Uint8Array.from(cmd.pack());
      this.cmdstr = num == -1 ? '减小音量' : '增加音量'
      this.sendMsg(message)
    },
    // 文字转语音
    str2voice (str) {
      this.volumeText = str
      let cmdTTSText = new CmdTtsText(
        this.$refs.mqttRef.mqtt.encoder.encode(this.volumeText),
        "<B250A"
      );
      let message = Uint8Array.from(cmdTTSText.pack());
      this.sendMsg(message)
    },
    // 实时语音
    actualTimeAudio (msg) {
      this.sendMsg(msg)
    },
    // 播放语音
    playVoice () {

    },
    // 播放文件
    playFile () {

    },
    // 心跳检测
    handleClick (tab, event) {
      console.log(tab, event);
    }
  },
  mounted () {
    this.openMqtt()
  }
}
</script>
<style lang="scss" scoped>
.home {
  .content {
    width: 531px;
    height: 376px;
    background: rgba(24, 39, 76, 0.7);
    border: 1px solid #43deff;
    box-shadow: 0 2px 8px 0 rgba(1, 162, 255, 0.7), inset 0 0 8px 0 #019aff,
      inset 0 0 64px 0 rgba(26, 138, 227, 0.35);
    .toptitle {
      padding: 10px 20px 10px 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 44px;
      background: rgba(25, 66, 156, 0.5);
      background-image: radial-gradient(
        closest-side at 50% 100%,
        rgba(107, 217, 255, 0.15) 0%,
        rgba(35, 68, 184, 0) 100%
      );
      box-shadow: 0 2px 8px 0;
      span {
        font-family: MicrosoftYaHei-Bold;
        font-size: 18px;
        color: #43deff;
        letter-spacing: 0;
      }
      .Propaganda {
        font-weight: 700;
      }
      .shutdown {
        font-weight: 400;
      }
    }
    .bottomcentent {
      width: 100%;
      height: calc(100%-44px);
      display: flex;
      .leftcentent {
        width: 130px;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: space-around;
        flex-wrap: wrap;
        flex-direction: column;
        .apparatus {
          width: 99px;
          height: 99px;
          opacity: 0.5;
          background: #080e13;
          border-radius: 80px;
          margin-top: 15px;
          margin-bottom: 15px;
        }
        .angleadjustment {
          // margin: 10px 0px 10px;
          margin-left: 20px;
          // margin: auto;
          height: 16px;
          width: 100%;
          // display: flex;
          // justify-content: center;
          img {
            width: 24px;
            height: 16.55px;
            background: rgb(93, 103, 129);
            box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1),
              inset 0 -5px 5px 0 rgba(175, 189, 209, 0.1);
            margin-right: 10px;
            vertical-align: middle;
          }
          span {
            font-family: MicrosoftYaHei;
            font-size: 16px;
            color: #ffffff;
            line-height: 16px;
            font-weight: 400;
            vertical-align: middle;
          }
        }
        .rotatingbutton {
          margin-top: 25px;
          margin-bottom: 25px;
          width: 64px;
          height: 44px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .volume {
          // margin: 10px 0px 10px;
          margin-left: 20px;
          height: 16px;
          width: 100%;
          margin-bottom: 25px;
          // display: flex;
          // justify-content: center;
          img {
            width: 24px;
            height: 21.25px;
            background: rgb(93, 103, 129);
            box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1),
              inset 0 -5px 5px 0 rgba(175, 189, 209, 0.1);
            margin-right: 10px;
            vertical-align: middle;
          }
          span {
            font-family: MicrosoftYaHei;
            font-size: 16px;
            color: #ffffff;
            line-height: 16px;
            font-weight: 400;
            vertical-align: middle;
          }
        }
        .volumeimg {
          height: 30px;
          width: 100%;
          padding: 0px 10px;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            height: 16px;
            width: 16px;
            background: #1e1e1e;
            border: 1px solid #0a0a0a;
            border-radius: 50%;
          }
          .progress {
            display: block;
            width: 72px;
            height: 4px;
            background: #6a8495;
            border-radius: 3px;
            margin: 0px 5px;
            display: flex;
            .line {
              display: block;
              width: 18px;
              height: 4px;
              background: #43deff;
              border-radius: 10px;
            }
            .ball {
              display: block;
              margin: -2px -1px;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: #43deff;
              box-shadow: 0 0 4px 0 rgba(41, 207, 255, 0.3),
                0 2px 4px 0 rgba(41, 98, 179, 0.5);
            }
          }
        }
      }
      .rightcentent {
        margin-top: 15px;
        width: 380px;
        height: 308px;
        border: 1px solid #3768b3;
        border-radius: 4px 4px 0 0;
      }
    }
  }
}
</style>
